<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {% load static %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/index.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'css/jquery.mCustomScrollbar.css' %}"/>
    <script src="{% static 'js/jquery-3.2.1.min.js' %}"></script>
    <script src="{% static 'js/jquery-3.2.1.min.js' %}"></script>
    <script src="{% static 'js/axios.min.js' %}"></script>
    <script src="{% static 'js/vue.global.js' %}"></script>
    <script src="{% static 'layer/layer.js' %}"></script>
    <title>详情</title>
</head>
<body>

<header>
    <div class="lf">
        <a class="home" href="{% url 'index' %}">系统首页</a>
        {% if user.is_authenticated %}
            <a href="{% url 'res:upload_res' %}">上传资料</a>
        {% endif %}
    </div>
    <div id="search">
        <input type="text" name="name"
               placeholder="请输入要搜索的资源" autocomplete="off"/><a class="search btn">搜索</a>
    </div>

    <div class="rf">

        {% if user.is_authenticated %}
            <div class="email-info">
                <b>99</b>
                <ul class="email-list">
                    <li><a href="./message.html">官方<b>0</b></a></li>
                    <li><a href="./message.html">通知<b>0</b></a></li>
                    <li><a href="./message.html">私信<b>0</b></a></li>
                </ul>
            </div>
        {% endif %}

        {% if user.is_authenticated %}
            <a class="info" href="{% url 'user:personal' %}">个人中心</a>
            <a class="cols" href="{% url 'res:collect_list' %}">收藏</a>
            <a class="exit" href="{% url 'logout' %}">退出登录</a>
        {% endif %}

        {% if user.is_anonymous %}
            <a href="{% url 'login' %}">登录/注册</a>
        {% endif %}

    </div>
</header>

<article>
    <!-- 网站主体 -->
    <div id="main">
        <!-- 定义右侧窗口信息 -->
        <section class="aside">
            <aside class="users">
                <img src="/images/unknown.png"/>
                <div>
                    <p><a href="javascript:void(0);">点击登录</a></p>
                    <p><a href="javascript:void(0);">登录账号可享受大众会员特权</a></p>
                </div>
                <p onclick="$('.vip-cvs').show()">
                    <span class="lf"></span>开通VIP尊享特权<span class="rf"></span>
                </p>
                <div class="clearfix">
                    <p class="download svip">下载权益</p>
                    <p class="book svip">图书权益</p>
                    <p class="vip svip">VIP文章</p>
                    <p class="col svip">收藏特权</p>
                </div>
            </aside>

            <!-- vip充值窗口 2022/8/14新增 -->
            <div class="vip-cvs">
                <div class="vip-cz-win">
                    <p class="title">爱下载资源分享平台-开通VIP</p>
                    <div class="v1">
                        <h1>月会员</h1>
                        <p class="money">10</p>
                        <p class="ls">有效期30天</p>
                        <p class="ls">免费资源下载</p>
                        <p class="ls">赠送200积分</p>
                        <a class="btn">立即开通</a>
                    </div>
                    <div class="v2">
                        <h1>年会员</h1>
                        <p class="money">80</p>
                        <p class="ls">有效期365天</p>
                        <p class="ls">免费资源下载</p>
                        <p class="ls">赠送2000积分</p>
                        <a class="btn">立即开通</a>
                    </div>
                    <div class="v3">
                        <h1>永久会员</h1>
                        <p class="money">300</p>
                        <p class="ls">永久有效</p>
                        <p class="ls">免费资源下载</p>
                        <p class="ls">赠送10000积分</p>
                        <a class="btn">立即开通</a>
                    </div>
                </div>
            </div>

            <!-- 评论资源 -->
            <aside class="res-com">
                <h1 class="res-title">资源评论</h1>
                <textarea class="area" placeholder="下载资源后方可评论" v-model="commentContent"></textarea>
                <div class="star">
                    <span v-for="n in 5" :key="n"
                          :class="{act:n <= currentStar}" @click="setStar(n)">★</span>

                </div>
                <div class="btn">
                    <button type="button" @click="submitComment">提交评论</button>
                </div>
            </aside>
        </section>
        <section>
            <!-- 定义详细目录-->
            <div id="detail">

                <!-- 资源上传者信息 -->
                <div class="res-author">
                    <img src="{{ uploader.avtar.url }}"/>
                    <span>{{ uploader.nickname }}</span><br/>
                    <div class="gz">
                        <a href="javascript:void(0)" @click="attention" id="attach" v-text="attact_text"></a>
                        <a href="./message.html" id="letter">私信</a>
                    </div>
                    <a href="./more.html">查看TA的更多资源</a>
                </div>

                <!-- collect 样式 会显示 收藏印章(如果该资源没有被收藏，不显示) -->
                <div :class="['res-detail',{'collect':is_collect}]">

                    <!-- 资源信息 -->
                    <div class="title">
                        <h1>{{ res.name }}<a href="javascript:void(0)"></a></h1>
                        <b class="time">{{ res.update_time }}</b>
                        <b class="filesize">{{ res.size }}MB</b>
                        <span class="kws">
                            {% for key in res.keyword %}
                                <em>{{ key }}</em>
                            {% endfor %}
					    </span>
                    </div>


                    <div class="desc"> <!-- 信息描述-->
                        {{ res.desc }}
                    </div>

                    <div class="msg"> <!-- 评价信息-->
                        <span class="act">★</span>
                        <span class="act">★</span>
                        <span class="act">★</span>
                        <span class="act">★</span>
                        <span>★</span>
                    </div>

                    <div class="oper"> <!-- 下载操作-->
                        <span>所需积分：<b>2</b></span>
                        <span>下载次数：<b>100</b></span>
                        <br/>
                        <span>
						<a class="btn" @click="collect">#{collect_text}</a>
						<a class="btn downx">普通下载</a>
						<a class="btn thunder">迅雷下载</a>
					</span>
                    </div>
                </div>

            </div>


            <div id="comment">
                <div class="title">
                    评论：<span>共有<b>2</b>条</span>
                </div>

                <!--每一条评论 -->
                <div class="cons">
                    <div class="img">
                        <img src="./images/coms.jpg"/>
                        <span class="star">
					    <span class="act">★</span>
						<span class="act">★</span>
						<span class="act">★</span>
						<span>★</span>
						<span>★</span>
					</span>
                    </div>
                    <div class="cmt">
                        <span>张三</span>|<span>2016-05-17 15:32:12</span>
                        <p class="msg">
						<span>
							这本书真心不错，值得下载~！
						</span>
                        </p>
                    </div>
                </div>

                <div class="cons">
                    <div class="img">
                        <img src="./images/coms.jpg"/>
                        <span class="star">
					    <span class="act">★</span>
						<span class="act">★</span>
						<span class="act">★</span>
						<span class="act">★</span>
						<span>★</span>
					</span>
                    </div>
                    <div class="cmt">
                        <span>张三</span>|<span>2011-05-17 15:32:12</span>
                        <p class="msg">
						<span>
							Google Plus用透明到白色的渐变遮罩，渐变遮罩在文字超出的时候才显示，但无法挤出文字，且背景只能纯色，不理想。
							豌豆荚则更简单粗暴换行显示，换行显示则文字未超出时依然显示 ...xxx，更不理想！当字数多到一定程度就显示省略号点点点。
							最初只是简单的点点点，之后花样越来越多，点点点加下箭头，点点点加更多，点点点加更多加箭头...。多行省略就是大段文字后面的花式点点点。
						</span>
                        </p>
                    </div>
                </div>

                <!-- 分页 -->
                <div class="pagination">
                    <a class="left"></a>
                    <a class="act">1</a>
                    <a>2</a>
                    <a>3</a>
                    <a>4</a>
                    <a>5</a>
                    <a class="right"></a>
                    <select>
                        <option>1/5</option>
                        <option>2/5</option>
                        <option>3/5</option>
                        <option>4/5</option>
                        <option>5/5</option>
                    </select>
                </div>

            </div>

        </section>
    </div>
</article>
<footer>
    <p class="decro">本站所有资源信息均由网友上传,本站只是为了推广资源让更多读者下载,使用。如涉侵权，请联系管理员</p>
    <p class="cr">Copyright © 2021-2025 <span class="site">爱下载资源分享平台</span> All Rights Reserved.</p>
    <p class="num">沪ICP备14048333号</p>
</footer>

<script>
    Vue.createApp({
        data() {
            return {
                is_collect: false,//是否显示收藏样式
                collect_text: "收藏",//收藏按钮文字
                attact_text: '{{ attention }}',//关注按钮

                currentStar: 0, // 当前选中的星级
                commentContent: "",// 评论内容

            }
        },
        delimiters: ["#{", "}"],
        methods: {

            collect() {
                this.is_collect = !this.is_collect;

                if (this.is_collect) {
                    this.collect_text = "取消收藏";
                } else {
                    this.collect_text = "收藏";
                }
                // 获取资源id
                let res_id = "{{ res.id }}";
                axios.post('/res/collect', {res_id: res_id}, {
                    headers: {"Content-Type": "application/x-www-form-urlencoded"}
                }).then(res => {
                    if (res.data.code === 200) {
                        layer.msg(res.data.msg, {icon: 6});
                    } else {
                        layer.msg(res.data.msg, {icon: 5});
                    }

                })
            },
            attention() {
                let res_id = "{{ res.id }}";


                axios.post('/res/attention/', {res_id: res_id}, {
                    headers: {"Content-Type": "application/x-www-form-urlencoded"}
                }).then(res => {
                    if (res.data.code === 200) {

                        if (this.attact_text === '已关注') {
                            this.attact_text = '关注';
                        } else {
                            this.attact_text = '已关注';
                        }

                        layer.msg(res.data.msg, {icon: 6});
                    } else {
                        layer.msg(res.data.msg, {icon: 5});
                    }

                })
            },
            setStar(n) {
                this.currentStar = n;
                console.log("===", n)
            },
            submitComment() {
                alert("==")
                //提交 评价的星级
                if (this.currentStar === 0) {
                    layer.msg("请选择评分星级", {icon: 5});
                    return;
                }
                if (!this.commentContent) {
                    layer.msg("请输入评论内容", {icon: 5});
                    return;
                }
                axios.post('/res/comment/', {
                    res_id: "{{ res.id }}",
                    star: this.currentStar,
                    content: this.commentContent
                }, {
                    headers: {"Content-Type": "application/x-www-form-urlencoded"}
                }).then(res => {
                    if (res.data.code === 200) {
                        layer.msg(res.data.msg, {icon: 6});
                        // 清空评论内容和星级
                        this.commentContent = "";
                        this.currentStar = 0;
                    } else {
                        layer.msg(res.data.msg, {icon: 5});
                    }

                })


            },

        },
        //修改vue的插值符号
    }).mount("#main")

</script>


</body>

</html>